import { useState } from 'react'
import { Textarea, Input, Select, SelectItem } from '@nextui-org/react'

export default function Generator() {
  const [keywords, setKeywords] = useState('')
  const [desc, setDesc] = useState('')

  return (
    <div className="flex flex-col gap-y-4 w-[840px] h-[316px] px-3.5 py-6 bg-white mx-[auto] mb-row shadow-lg max-sm:w-full rounded-[20px]">
      <div className="flex flex-col gap-y-2">
        <div className="flex flex-row items-center justify-between">
          <span className="text-base font-bold">Generate by Keywords *</span>
          <span className="text-sm text-secondary">{keywords.length}/200</span>
        </div>
        <Textarea
          variant="bordered"
          placeholder="Example: travel, food, fashion, fitness, pet"
          value={keywords}
          onValueChange={(val) => {
            setKeywords(val.slice(0, 200))
          }}
        />
      </div>
      <div className="flex flex-row justify-between gap-x-8">
        <div className="flex-1 flex flex-col gap-y-2">
          <div className="flex flex-row items-center justify-between">
            <span className="text-base font-bold">Description</span>
            <span className="text-sm text-secondary">{desc.length}/100</span>
          </div>
          <Input
            variant="bordered"
            value={desc}
            onValueChange={(val) => {
              setDesc(val.slice(0, 100))
            }}
          />
        </div>
        <div className="flex-1 flex flex-col gap-y-2">
          <div className="flex flex-row items-center justify-between">
            <span className="text-base font-bold">Language</span>
          </div>
          <Select variant="bordered">
            {['en', 'es', 'pt'].map((lng) => (
              <SelectItem key={lng} value={lng}>
                {lng}
              </SelectItem>
            ))}
          </Select>
        </div>
      </div>
    </div>
  )
}
